<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8" />
    <title>JQuery 实现 QRcode</title>
    <style>
        #code {
            text-align: center;
            height: 100%;
            margin: 0 auto;
            max-width: 980px;
        }
        
        .btn {
            text-align: center;
        }
        
        h1 {
            font-size: 50px;
            position: absolute;
            bottom: 5%;
            left: 0;
            width: 100%;
            text-align: center;
        }
        
        @media screen {
            .btn button {
                margin: 10px 15px;
            }
            #canvas {
                display: block;
            }
            #image {
                display: none;
            }
        }
        
        @media print {
            #canvas {
                display: none;
            }
            #image {
                display: block;
            }
        }
    </style>

</head>

<body>
    <div class="btn">
        <button id="btnEncode" onclick="encode();">生成二维码</button>
        <button id="btnPrint" onclick="print()">打印</button>
    </div>
    <hr />
    <div id="code">
    </div>
    <img id="image" src="" style="text-align: center;width: 100%;height:auto;margin: 150px auto 0;" />
</body>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script>
<script type="text/javascript" src="js/utf.js"></script>
<script src="js/jquery.jqprint-0.3.js" type="text/javascript"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script>
    function encode() {
        var id = 123456;
        var name = "我的二维码";
        $("#code").html(" " + "<h1>" + name + "</h1>");
        $("#code").qrcode({
            render: "canvas",
            text: "文本说明id=" + id,
            width: "600", //二维码的宽度
            height: "600", //二维码的高度
            background: "#ffffff", //二维码的后景色
            foreground: "#000000", //二维码的前景色
            src: 'img/logo.png'
        });
        html2canvas($("#code"), {
            onrendered: function(canvas) {
                document.getElementById("image").src = canvas.toDataURL();
            }
        });
    }
    //打印
    function print() {
        $("#image").jqprint();
    }
</script>

</html>